<template>
	<view>
		<view class="flexClsNowrapSpcBtw bg-white border-bottom" style="margin-top:10px; padding:15px"><span
				style="font-weight: bold;">您想要做</span><span>代跑腿，全城使命必达</span></view>
			<view class="flexClsNowrapSpcBtw bg-white border-bottom" style="margin-top:10px; padding:15px">
				<span style="font-weight: bold;">服务单价 <text style="color:#F55959 ">*</text></span>
				<span style="color:#F55959;font-size: 18px;font-weight: bold;">¥20.00<text style="color: #999999;font-size: 14px;">/次</text></span>
				<span><u-number-box v-model="form.unitPrice" ></u-number-box></span>
			</view>	
			<view class="bg-white" style="margin-top:10px;padding: 10px 15px;">
				<text class="font-weight-bold">具体需求</text>
				<textarea
					style="box-sizing: border-box; padding: 10px; background: #F2F3F5;border-radius: 6px;width: 345px;display: block;height: 120px;font-size: 14px;margin-top: 10px;"
					name="" id="" placeholder="请填写具体需求"></textarea>
				<view style="margin-top: 10px;" class="flex">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="5" multiple
						:maxCount="3" :action="action" :auto-upload="false"></u-upload>
					<text style="padding: 10px; color:#999999">最多上传3张图片</text>
				</view>
			</view>
			<view>
				<view class="flexClsNowrapSpcBtw bg-white border-bottom" style="margin-top:10px; padding:15px" @click="timeShow=true">
					<span style="font-weight: bold;">上门时间</span>
					<text style="font-size: 14px;color: #999999;">请选择上门时间</text>
					<span style="display: block;width:20px"><u-icon name="arrow-right" color="#999999" size="28px"></u-icon></span>
					
				</view>	
				<u-picker mode="time" v-model="timeShow" :params='timeParams'></u-picker>
				<view class="flexClsNowrapSpcBtw bg-white " style="margin-top:10px; padding:15px" @click="regionShow=true">
					<span style="font-weight: bold;">上门位置</span>
					<text style="font-size: 14px;color: #999999;">请选择省市区</text>
					<span style="display: block;width:20px"><u-icon name="arrow-right" color="#999999" size="28px"></u-icon></span>
					
				</view>	
				<u-picker mode="region" v-model="regionShow" :params='regionParams'></u-picker>
				<view class="flexClsNowrapSpcBtw bg-white border-bottom" style="padding:15px" >
					<span style="font-weight: bold;"></span>
					<input type="text" style="font-size: 14px;color: #999999;" placeholder="请补充详细地址、门牌号"></input>
					<span style="display: block;width:20px"></span>
				</view>	
				<view style="color:#999999;text-align: center;margin:15px  0  0  0  ;padding-bottom:38px ;">订购须知：内容内容内容内容内容内容内容内</view>
			</view>
			<view class="flexClsNowrapSpcBtw align-center" style="position: fixed;bottom: 0;   width:100%;padding: 7px 10px;background: #FFFFFF;box-shadow: 0px -1px 8px 0px rgba(0,0,0,0.1);">
				<view class="font-weight-bold">合计：<span style="color:#FD3636" >￥{{form.unitPrice*20}}</span></view>
				<view style="width: 110px;height: 40px;background: linear-gradient(180deg, #76D904 0%, #417505 100%);border-radius: 22px;color:#ffffff;line-height: 40px;text-align: center;font-size: 16px;" @click="orderpay">支付</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeShow:false,
				regionShow:false,
				action:'http://www.example.com',
				form:{
					unitPrice:0,
					value1:''
				},
				timeParams : {
					year: true,
					month: true,
					day: true,
					hour: true,
					timestamp: true,
				},
				regionParams : {
					province: true,
					city: true,
					area: true
				}

			}
		},
		methods: {
			orderpay(){
				console.log("去支付了");
			}
		}
	}
</script>

<style>
		page {
			background: #F4F4F4;
		}
</style>
